<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>{{ title }}</title>

    <link href="../../assets/styles.css" rel="stylesheet" />

    <style>
      {% if style %}
        {{ style|indent(4) }}
      {% endif %}
    </style>

    <script>
      window.Promise ||
        document.write(
          '<script src="https://cdn.jsdelivr.net/npm/promise-polyfill@8/dist/polyfill.min.js"><\/script>'
        )
      window.Promise ||
        document.write(
          '<script src="https://cdn.jsdelivr.net/npm/eligrey-classlist-js-polyfill@1.2.20171210/classList.min.js"><\/script>'
        )
      window.Promise ||
        document.write(
          '<script src="https://cdn.jsdelivr.net/npm/findindex_polyfill_mdn"><\/script>'
        )
    </script>

    {% if format == 'vanilla-js' %}
    <script src="../../../dist/apexcharts.js"></script>
    {% elif format == 'react' %}
    <script src="https://cdn.jsdelivr.net/npm/react@16.12/umd/react.production.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/react-dom@16.12/umd/react-dom.production.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/prop-types@15.7.2/prop-types.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.34/browser.min.js"></script>
    <script src="../../../dist/apexcharts.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/react-apexcharts@1.3.6/dist/react-apexcharts.iife.min.js"></script>
    {% elif format == 'vue' %}
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script>
    <script src="../../../dist/apexcharts.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue-apexcharts"></script>
    {% endif %}

    <script>
      // Replace Math.random() with a pseudo-random number generator to get reproducible results in e2e tests
      // Based on https://gist.github.com/blixt/f17b47c62508be59987b
      var _seed = 42;
      Math.random = function() {
        _seed = _seed * 16807 % 2147483647;
        return (_seed - 1) / 2147483646;
      };
    </script>

    {{ scripts|indent(2) }}
  </head>

  <body>
    {% if format == 'vanilla-js' %} {{ html|indent(6) }}

    <script>
      {% for chart in charts %}
        var options{{ chart.varName }} = {
          series: {{ chart.series|indent(8) }},
          {{ chart.options|indent(8) }}
        };

        var chart{{ chart.varName }} = new ApexCharts(document.querySelector("#{{ chart.elemId }}"), options{{ chart.varName }});
        chart{{ chart.varName }}.render();
      {% endfor %}
      {% if vanilla_js_script %}
        {{ vanilla_js_script|indent(6) }}
      {% endif %}
    </script>

    {% elif format == 'react' %}
    <div id="app"></div>

    <div id="html">
      {{ html|escape }}
    </div>

    <script type="text/babel">
      class ApexChart extends React.Component {
        constructor(props) {
          super(props);

          this.state = {
          {% for chart in charts %}
            series{{ chart.varName }}: {{ chart.series|indent(12) }},
            options{{ chart.varName }}: {
              {{ chart.options|indent(14) }}
            },
          {% endfor %}
          {% if react_state %}
            {{ react_state|indent() }}
          {% endif %}
          };
        }

      {% if react_script %}
        {{ react_script|indent(8) }}
      {% endif %}

        render() {
          return (
            <div>
              {{ html|indent(14) }}
              <div id="html-dist"></div>
            </div>
          );
        }
      }

      const domContainer = document.querySelector('#app');
      ReactDOM.render(React.createElement(ApexChart), domContainer);
    </script>

    {% elif format == 'vue' %}
    <div id="app">
      {{ html|indent(4) }}
    </div>

    <!-- Below element is just for displaying source code. it is not required. DO NOT USE -->
    <div id="html">
      {{ html|escape|indent(6) }}
    </div>

    <script>
      new Vue({
        el: '#app',
        components: {
          apexchart: VueApexCharts,
        },
        data: {
          {% for chart in charts %}
          series{{ chart.varName }}: {{ chart.series|indent(10) }},
          chartOptions{{ chart.varName }}: {
            {{ chart.options|indent(12) }}
          },
          {% endfor %}
          {% if vue_data %}{{ vue_data|indent(10) }}{% endif %}
        },
        {% if vue_script %}{{ vue_script|indent(8) }}{% endif %}
      })
    </script>
    {% endif %}
  </body>
</html>
